<template>
  <div class="box">
    <div class="fr" style="padding-right: 30px;padding-top: 20px;">
      <el-button style="background: #E4E410;color: #ffffff" @click="addRuleSetDialog()">添加规则</el-button>
      <el-button style="background: #D43C3C;color: #ffffff">删除规则</el-button>
    </div>
    <div style="padding-top: 80px;" class="rule-item">
      <div class="common-tab">
        <input type="checkbox" style="height: 20px;width: 20px">
      </div>
      <div class="common-tab" style="padding-left: 30px; width: 200px;">
        计分规则1
      </div>
      <div class="common-tab" style="padding-left: 30px;">
        <el-button>更名</el-button>
      </div>
      <div class="common-tab" style="padding-left: 30px;">
        <el-button>编辑</el-button>
      </div>
    </div>
    <div class="rule-item">
      <div class="common-tab">
        <input type="checkbox" style="height: 20px;width: 20px">
      </div>
      <div class="common-tab" style="padding-left: 30px; width: 200px;">
        计分规则2
      </div>
      <div class="common-tab" style="padding-left: 30px;">
        <el-button>更名</el-button>
      </div>
      <div class="common-tab" style="padding-left: 30px;">
        <el-button>编辑</el-button>
      </div>
    </div>
    <div class="rule-item">
      <div class="common-tab">
        <input type="checkbox" style="height: 20px;width: 20px">
      </div>
      <div class="common-tab" style="padding-left: 30px; width: 200px;">
        计分规则3
      </div>
      <div class="common-tab" style="padding-left: 30px;">
        <el-button>更名</el-button>
      </div>
      <div class="common-tab" style="padding-left: 30px;">
        <el-button>编辑</el-button>
      </div>
    </div>

    <el-dialog title="规则设定" :visible.sync="ruleSetDialog" width="500px" :close-on-click-modal="false">
      <el-form label-position="left" label-width="100px" style='width: 100%; '>
        <el-form-item label="规则名称" prop="matchName">
          <el-input ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ruleSetDialog = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    export default {
      data() {
        return {
          ruleSetDialog: false,
          tableKey: 0

        }
      },
      methods: {
        addRuleSetDialog(id) {
          this.ruleSetDialog = true
        }
      }
    }
</script>

<style scoped>
  .box {
    width: 820px;
    margin: 20px auto;
  }
  .rule-item {
    padding-top: 30px;
    border-bottom: #a8a9a9 dashed 1px;
    padding-bottom: 10px;
  }
</style>
